<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
    margin-top: 50px;
  }
   .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
   }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .aaa{
    display: flex;
    justify-content: center;
  }
  .add_mg_right{
    margin-right: 200px;
  }
</style>
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" align="center" @tab-click="handleClick">
      <el-tab-pane label="提现说明" name="first">提现说明</el-tab-pane>
      <el-tab-pane label="开店信息" name="second" class="aaa">
        <el-card class="box-card add_mg_right">
          <div slot="header" class="clearfix">
            <span>类型: 开店宣传</span>
          </div>
          <div style="display: inline-block">
            <el-form ref="list" style="height: 500px">
              <el-form-item label="开店宣传" prop="shopPublicity">
                <el-alert
                  title="建议图片像素（181px * 48px）"
                  type="warning"
                  show-icon
                  style="margin-bottom: 10px; line-height: 20px; width: 280px"
                  close-text="知道了"/>
                <el-upload
                  :show-file-list="false"
                  :multiple="false"
                  :http-request="uploadShopPublicity"
                  :before-upload="beforeUploadShopPublicity"
                  :on-remove="handleRemoveShopPublicity"
                  :on-success="successShopPublicity"
                  action=""
                  class="avatar-uploader">
                  <img v-if="true" :src="list.shopPublicity" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>类型: 开店步骤</span>
          </div>
          <div style="display: inline-block">
            <el-form ref="list" style="height: 500px">
              <el-form-item label="开店步骤" prop="shopSteps">
                <el-alert
                  title="建议图片像素（181px * 48px）"
                  type="warning"
                  show-icon
                  style="margin-bottom: 10px; line-height: 20px; width: 280px"
                  close-text="知道了"/>
                <el-upload
                  :show-file-list="false"
                  :multiple="false"
                  :http-request="uploadShopSteps"
                  :before-upload="beforeUploadShopSteps"
                  :on-remove="handleRemoveShopSteps"
                  :on-success="successShopSteps"
                  action=""
                  class="avatar-uploader">
                  <img v-if="true" :src="list.shopSteps" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="注意事项" name="third">
        <tinymce :height="300" v-model="list.noticeItem" class="mb20"/>
      </el-tab-pane>
    </el-tabs>
    <!--<div class="filter-container">-->
    <!--<el-input v-if="formThead.id" v-model="listQuery.id" style="width: 200px;" class="filter-item" placeholder="id" @keyup.enter.native="handleFilter"/>-->
    <!--<el-input v-if="formThead.withdrawlInstructions" v-model="listQuery.withdrawlInstructions" style="width: 200px;" class="filter-item" placeholder="提现说明" @keyup.enter.native="handleFilter"/>-->
    <!--<el-input v-if="formThead.shopPublicity" v-model="listQuery.shopPublicity" style="width: 200px;" class="filter-item" placeholder="开店宣传" @keyup.enter.native="handleFilter"/>-->
    <!--<el-input v-if="formThead.shopSteps" v-model="listQuery.shopSteps" style="width: 200px;" class="filter-item" placeholder="开店步骤" @keyup.enter.native="handleFilter"/>-->
    <!--<el-input v-if="formThead.noticeItem" v-model="listQuery.noticeItem" style="width: 200px;" class="filter-item" placeholder="注意事项" @keyup.enter.native="handleFilter"/>-->
    <!--<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>-->
    <!--<addPage @getLists="getLists"/>-->
    <!--</div>-->

    <!--<div class="filter-container">-->
    <!--<el-checkbox v-model="formThead.id" label="id">id</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.withdrawlInstructions" label="提现说明">提现说明</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.shopPublicity" label="开店宣传">开店宣传</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.shopSteps" label="开店步骤">开店步骤</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.noticeItem" label="注意事项">注意事项</el-checkbox>-->
    <!--</div>-->

    <!--<el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">-->
    <!--<el-table-column v-if="formThead.id" align="center" label="id">-->
    <!--<template slot-scope="scope">-->
    <!--<span>{{ scope.row.id }}</span>-->
    <!--</template>-->
    <!--</el-table-column>-->
    <!--<el-table-column v-if="formThead.withdrawlInstructions" align="center" label="提现说明">-->
    <!--<template slot-scope="scope">-->
    <!--<span>{{ scope.row.withdrawlInstructions }}</span>-->
    <!--</template>-->
    <!--</el-table-column>-->
    <!--<el-table-column v-if="formThead.shopPublicity" align="center" label="开店宣传">-->
    <!--<template slot-scope="scope">-->
    <!--<span>{{ scope.row.shopPublicity }}</span>-->
    <!--</template>-->
    <!--</el-table-column>-->
    <!--<el-table-column v-if="formThead.shopSteps" align="center" label="开店步骤">-->
    <!--<template slot-scope="scope">-->
    <!--<span>{{ scope.row.shopSteps }}</span>-->
    <!--</template>-->
    <!--</el-table-column>-->
    <!--<el-table-column v-if="formThead.noticeItem" align="center" label="注意事项">-->
    <!--<template slot-scope="scope">-->
    <!--<span>{{ scope.row.noticeItem }}</span>-->
    <!--</template>-->
    <!--</el-table-column>-->

    <!--<el-table-column align="center" label="操作" class-name="small-padding fixed-width">-->
    <!--<template slot-scope="scope">-->
    <!--<editPage :row_data="scope.row" @getLists="getLists"/>-->
    <!--<el-button @click="del(scope.row.id)">删除</el-button>-->
    <!--</template>-->
    <!--</el-table-column>-->
    <!--</el-table>-->

    <!--<div class="pagination-container">-->
    <!--<el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>-->
    <!--</div>-->
  </div>
</template>

<script>
import { getList, del, save } from '@/api/system/configuration_info'
import { client } from '@/utils/alioss'
import store from '@/store'
import waves from '@/directive/waves' // 水波纹指令
import addPage from './addPage'
import editPage from './editPage'
import Tinymce from '@/components/Tinymce'
export default {
  name: 'ComplexTable',
  directives: {
    waves
  },
  components: { addPage, editPage, Tinymce },
  data() {
    return {
      shopPublicityImg: null,
      shopStepsImg: null,
      activeName: 'second',
      tableKey: 0,
      list: {
        shopPublicity: null,
        shopSteps: null,
        noticeItem: null
      },
      total: null,
      listLoading: true,
      listQuery: {
        id: undefined,
        page: 1,
        limit: 20
      },
      formThead: {
        id: true
      }
    }
  },
  created() {
    getList(store.getters.token, this.listQuery).then(response => {
      this.list = response.data.list.data
      this.list = this.list[0]
      console.log(11111)
      console.log(this.list)
    })
  },
  methods: {
    uploadShopPublicity(file) {
      const that = this
      var fileName = 'shopPublicity' + file.file.uid
      client().put(fileName, file.file).then((result) => {
        console.log(that.list.shopPublicity)
        that.list.shopPublicity = result.url
        that.shopPublicityImg = result.url
      }).catch((err) => {
        this.$message.error('图片上传失败，原因' + err)
      })
    },
    uploadShopSteps(file) {
      const that = this
      var fileName = 'shopPublicity' + file.file.uid
      client().put(fileName, file.file).then((result) => {
        console.log(that.list.shopSteps)
        that.list.shopSteps = result.url
        that.shopStepsImg = result.url
      }).catch((err) => {
        this.$message.error('图片上传失败，原因' + err)
      })
    },
    beforeUploadShopPublicity(file) {
      const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isRightType) {
        this.$message.error('只能上传jgp和png格式!')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2M')
      }
      return isRightType && isLt2M
    },
    beforeUploadShopSteps(file) {
      const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isRightType) {
        this.$message.error('只能上传jgp和png格式!')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2M')
      }
      return isRightType && isLt2M
    },
    handleRemoveShopPublicity() {
      this.list.shopPublicity = ''
    },
    handleRemoveShopSteps() {
      this.list.shopSteps = ''
    },
    successShopPublicity(res) {
      this.list.shopPublicity = res.url
    },
    successShopSteps(res) {
      this.list.shopSteps = res.url
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    onSubmit() {
      console.log()
      save(store.getters.token, this.list).then(res => {
        if (res.data.status === true) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        } else {
          this.$message.error('保存失败')
        }
        // this.close()
      })
    },
    getLists() {
      this.listLoading = true
      getList(store.getters.token, this.listQuery).then(response => {
        this.list = response.data.list.data
        this.total = response.data.list.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getLists()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getLists()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getLists()
    },
    del(id) {
      this.$message.info('正在删除' + id)
      del(store.getters.token, { id: id }).then(res => {
        this.$message.info('已经删除' + id)
        this.getLists()
      })
    }
  }
}
</script>
